<template>
  <span
    class="szy-radio"
    @click="toggle"
    :class="{ 'szy-radio-checked': label == value }"
  >
    <slot></slot>
  </span>
</template>

<script setup lang="ts">
import { toRefs } from "vue";
// radio组件接收不同的props 为表现不同的组件样式
const props = defineProps({
  value: { type: String },
  label: { type: String, default: "1" },
});
const { value, label } = toRefs(props);

const emit = defineEmits(["change"]);

const toggle = () => {
  emit("change", props.label);
};
</script>

<style scoped lang="scss">
$h: 14px;
$blue: #40a9ff;
.szy-radio {
  display: inline-flex;
  align-items: center;
  /* border: 1px solid red; */
  margin-left: 10px;
  cursor: pointer;
  margin-right: 10px;
}
.szy-radio::before {
  content: "";
  margin-right: 8px;
  display: block;
  border: 1px solid #ccc;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.szy-radio:hover:before,
.szy-radio:focus:before {
  border-color: $blue;
}
.szy-radio-checked {
  color: $blue;
}
.szy-radio-checked::before {
  border: 6px solid $blue;
  width: 5px;
  height: 5px;
  transition: all 100ms;
}
</style>
